<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>

        .bg{
             background-color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>header</div>
        <div class="row">row-1
            <div id="info">
                <label>员工姓名</label> <input id="empName"/>
            </div>
        </div>
        <div class="row">row-2
            <label>员工年龄</label> <input id="age"/>
        </div>
    </div>


<div id="box"></div>
</body>
<script src="../../lib/jquery.js"></script>
<script>

    /**1. id选择器*/
   /*  var empName = document.getElementById('empName');
     empName.value = "Mat";

     /!**
      *   [选择器].action()
      *
     * *!/
     $('#empName').val('Lee');
     alert( $('#empName').val())*/

   /**
    * 2. 类选器
    * */
 /*  var rows=  document.getElementsByClassName('row');
  // rows.classList.add('bg'); wrong

   for(var key in rows){
        rows[key].classList.add('bg');
    }*/

  // $('.row').addClass('bg');

   /**
    * 3.元素选择器
   * */
  /* var inputs = document.getElementsByTagName('input');

   for(var key in inputs){
       inputs[key].classList.add('bg');
   }*/

 // $('input').addClass('bg');

    /**
     * 4. 层次选择器
     * */
     // 原生js的实现
 //    $('.container .row').text('world');


    /***
     * 5.插值
     *   innerText  [].text('');
     *   innerHTML  [].html('');
     *   value      [].val()
     * */

      $('#box').html('<h1>test world!</h1>');
      alert($('#box').html());
</script>
</html>